<template>
  <div>
    <a-page-header
      style="background-color: #f5f5f5; padding: 24px"
      title="Title"
      sub-title="This is a subtitle"
      @back="() => null"
    />
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="Title"
      :breadcrumb="{ routes }"
      sub-title="This is a subtitle"
    >
      <template #tags>
        <a-tag color="blue">Running</a-tag>
      </template>
      <template #extra>
        <a-button key="3">Operation</a-button>
        <a-button key="2">Operation</a-button>
        <a-button
          key="1"
          type="primary"
        >Primary</a-button>
      </template>
      <a-descriptions
        size="small"
        :column="3"
      >
        <a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
        <a-descriptions-item label="Association">
          <a>421421</a>
        </a-descriptions-item>
        <a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
        <a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
        <a-descriptions-item label="Remarks">
          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
        </a-descriptions-item>
      </a-descriptions>
      <a-row type="flex">
        <a-statistic
          title="Status"
          value="Pending"
        />
        <a-statistic
          title="Price"
          prefix="$"
          :value="568.08"
          :style="{
            margin: '0 32px',
          }"
        />
        <a-statistic
          title="Balance"
          prefix="$"
          :value="3345.08"
        />
      </a-row>
      <template #footer>
        <a-tabs>
          <a-tab-pane
            key="1"
            tab="Details"
          />
          <a-tab-pane
            key="2"
            tab="Rule"
          />
        </a-tabs>
      </template>
    </a-page-header>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      routes: [
        {
          path: 'index',
          breadcrumbName: 'First-level Menu',
        },
        {
          path: 'first',
          breadcrumbName: 'Second-level Menu',
        },
        {
          path: 'second',
          breadcrumbName: 'Third-level Menu',
        },
      ]
    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
